import React from 'react'
import {
	Form,
	FormCell,
	CellHeader,
	CellBody,
	Label,
	Input,
	PanelBody,
	CellsTitle,
	Button,
	Toptips
} from 'react-weui'
import Title from '../../ReuseTitle'
import { browserHistory } from 'react-router';
import { connectUser } from '../../../container/user/connectUser'
import $ from 'jquery';

class UserLogin extends React.Component {
		constructor(props) {
			super(props)
			this.state = {
				phoneNum: null,
				password: null,
				showWarn: false,
				showSuccess: false,
				showInfo: false,
				warnTimer: null,
				successTimer: null,
				infoTimer: null,
				warn: [],
				loginIn: false,
			}
		}
		componentWillUnmount() {
			this.state.warnTimer && clearTimeout(this.state.warnTimer);
			this.state.successTimer && clearTimeout(this.state.successTimer);
			this.state.infoTimer && clearTimeout(this.state.infoTimer);
		}
		handleLogin() {
			var phoneNum = this.state.phoneNum;
			var password = this.state.password;
			if (!phoneNum || !password) {
				this.setState({
					warn: '用户名和密码军不能为空！',
					showWarn: true,
				});
				this.state.warnTimer = setTimeout(() => {
					this.setState({
						showWarn: false
					});
				}, 2000);
			} else {
				this.props.loginActions.loginUser(phoneNum, password);
				this.setState({
					loginIn: true,
				})
			}
		}
		componentWillReceiveProps(nextProps) {
			if (nextProps.login.isAuthenticated == true && this.state.loginIn == true) {
				browserHistory.go(-1);
				this.setState({
					loginIn: false
				})
			}
			if (nextProps.login.isAuthenticated == false && this.state.loginIn == true) {
				this.setState({
					warn: '登录失败！请输入正确的用户名或密码！',
					showWarn: true
				})
				this.state.warnTimer = setTimeout(() => {
					this.setState({
						showWarn: false
					});
				}, 2000);
			}
		}
		phoneNum(e) {
			this.setState({
				phoneNum: e.target.value,
			});
		}
		password(e) {
			this.setState({
				password: e.target.value,
			});
		}
	render() {
		const { storeId } = this.state;
		return (
			<div>
				<Title title="使用手机号登录" />
				<PanelBody style={{ marginTop: '65px' }}>
			        <Form>
			            <FormCell>
			                <CellHeader>
			                    <Label>手机号</Label>
			                </CellHeader>
			                <CellBody>
			                    <Input type="tel" placeholder="请输入您的手机号码" onChange={ e=> this.phoneNum(e)}/>
			                </CellBody>
			            </FormCell>
			             <FormCell>
			                <CellHeader>
			                    <Label>密码</Label>
			               </CellHeader>
			                <CellBody>
			                    <Input type="password" placeholder="请输入登陆密码" onChange={ e=> this.password(e)}/>
			                </CellBody>
			            </FormCell>
			        </Form>
		        </PanelBody>
		        <Toptips type="warn" show={this.state.showWarn}>{this.state.warn}</Toptips>
                <Toptips type="primary" show={this.state.showSuccess}> 登陆成功 </Toptips>
		        <CellBody style={{ margin: '32px 7px 0 7px'}}>
	            	<Button type="primary" onClick={this.handleLogin.bind(this)}>登录</Button>
		        </CellBody>
            </div>
		);
	}
}
export default connectUser(UserLogin)
